<!DOCTYPE html>
<html>

<head>
    <title>Custom Properties</title>
    <style>
        :root {
            --my-color: purple;
            --width: 10px;
            --color: orange;
            --style: solid;
            --border: var(--width) var(--color) var(--style);
            --background-color: yellow;
            --background-position: top 10px right 5px;
        }

        div {
            margin: 20px;
        }

        .test {
            background-color: var(--my-color);
        }

        .test-parent {
            --my-color: pink;
            border: 1px solid black;
        }

        .box {
            width: 150px;
            height: 150px;
            border: 1px solid black;
        }

        .test-fallback {
            background-color: var(--fallback, lime);
        }

        .test-fallback.with {
            --fallback: cyan;
        }

        .test-nested {
            border: var(--border);
        }

        .test-inside-a-function {
            --blue: 255;
            background-color: rgb(255, 0, var(--blue));
        }

        .test-mixed {
            background: var(--background-color) url("background-repeat.png") var(--background-position) no-repeat;
        }

        .billion-laughs {
            --prop1: lol;
            --prop2: var(--prop1) var(--prop1);
            --prop3: var(--prop2) var(--prop2);
            --prop4: var(--prop3) var(--prop3);
            --prop5: var(--prop4) var(--prop4);
            --prop6: var(--prop5) var(--prop5);
            --prop7: var(--prop6) var(--prop6);
            --prop8: var(--prop7) var(--prop7);
            --prop9: var(--prop8) var(--prop8);
            --prop10: var(--prop9) var(--prop9);
            --prop11: var(--prop10) var(--prop10);
            --prop12: var(--prop11) var(--prop11);
            --prop13: var(--prop12) var(--prop12);
            --prop14: var(--prop13) var(--prop13);
            --prop15: var(--prop14) var(--prop14);
            --prop16: var(--prop15) var(--prop15);
            --prop17: var(--prop16) var(--prop16);
            --prop18: var(--prop17) var(--prop17);
            --prop19: var(--prop18) var(--prop18);
            --prop20: var(--prop19) var(--prop19);
            --prop21: var(--prop20) var(--prop20);
            --prop22: var(--prop21) var(--prop21);
            --prop23: var(--prop22) var(--prop22);
            --prop24: var(--prop23) var(--prop23);
            --prop25: var(--prop24) var(--prop24);
            --prop26: var(--prop25) var(--prop25);
            --prop27: var(--prop26) var(--prop26);
            --prop28: var(--prop27) var(--prop27);
            --prop29: var(--prop28) var(--prop28);
            --prop30: var(--prop29) var(--prop29);

            background: var(--prop30);
        }

        .dependency-cycle {
            --recursive: var(--recursive);

            --a: var(--b);
            --b: var(--a);

            background: var(--a);
            color: var(--recursive);
        }
    </style>
</head>

<body>
    <h1>CSS Custom Properties</h1>
    <pre>
        :root {
            --my-color: purple;
        }

        .test {
            background-color: var(--my-color);
        }

        .test-parent {
            --my-color: pink;
        }

    </pre>
    <div class="box test">
        <pre>
            .test
        </pre>
        This should be purple
    </div>

    <div class="test-parent">
        <pre>
            .test-parent
        </pre>
        <div class="box test">
            <pre>
                .test
            </pre>
            This should be pink
        </div>
    </div>

    <h2>Fallback Values</h2>
    <pre>
        .test-fallback {
            background-color: var(--fallback, lime);
        }

        .test-fallback.with {
            --fallback: cyan;
        }
    </pre>

    <div class="box test-fallback">
        <pre>.test-fallback</pre>
        This should be green
    </div>

    <div class="box test-fallback with">
        <pre>.test-fallback.with</pre>
        This should be cyan
    </div>

    <h2>Inline properties</h2>
    <pre>
        &lt;div style="--color: turquoise; background-color: var(--color)"&gt;
    </pre>
    <div class="box" style="--color: turquoise; background-color: var(--color)">
        This should be turquoise
    </div>

    <h2>Nested var()</h2>
    <pre>
        :root {
            --width: 10px;
            --color: orange;
            --style: solid;
            --border: var(--width) var(--color) var(--style);
        }
        .test-nested {
            border: var(--border);
        }
    </pre>

    <div class="box test-nested">
        <pre>.test-nested</pre>
        This should have a 10px solid orange border
    </div>

    <pre>
        .test-inside-a-function {
            --blue: 255;
            background-color: rgb(255, 0, var(--blue));
        }
    </pre>

    <div class="box test-inside-a-function">
        <pre>.test-inside-a-function</pre>
        This should be fuchsia
    </div>

    <h2>Mixed var()</h2>
    <pre>
        :root {
            --background-color: yellow;
            --background-position: top 10px right 5px;
        }

        .test-mixed {
            background: var(--background-color) url("background-repeat.png") var(--background-position) no-repeat;
        }
    </pre>

    <div class="box test-mixed">
        <pre>.test-mixed</pre>
        This should have a yellow background with a smiley face in the top-right corner
    </div>

    <h2>Billion laughs attack</h2>
    <pre>
        .billion-laughs {
            --prop1: lol;
            --prop2: var(--prop1) var(--prop1);
            --prop3: var(--prop2) var(--prop2);

            /* ... */

            --prop30: var(--prop29) var(--prop29);

            background: var(--prop30);
        }
    </pre>
    <div class="box billion-laughs">
        <pre>.billion-laughs</pre>
        This box tests that we handle the billion laughs attack. If we don't crash, it worked!
    </div>

    <h2>Dependency cycles</h2>
    <pre>
        .dependency-cycle {
            --recursive: var(--recursive);

            --a: var(--b);
            --b: var(--a);

            background: var(--a);
            color: var(--recursive);
        }
    </pre>
    <div class="box dependency-cycle">
        <pre>.dependency-cycle</pre>
        This box tests that we handle dependency cycles correctly. If we don't crash, it worked!
    </div>
</body>

</html>
